<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>海运时效表(柱状图)</span>
      </div>
      <el-form v-model="searchForm" size="mini" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-row>
              <el-col :span="8">
                <el-form-item prop="instockChannelIds">
                  <div slot="label">入库时间：</div>
                  <el-date-picker
                    v-model="searchForm.instockTimeRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item prop="instockChannelIds">
                  <div slot="label">渠道：</div>
                  <el-select
                    v-model="searchForm.instockChannelIds"
                    multiple
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, value) in channelMap"
                      :key="value"
                      :label="item"
                      :value="value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics">
              统计
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="16">
          <bar-chart :chart-data="chartData" :chart-data-name="chartDataName" />
        </el-col>
        <el-col :span="8">
          <el-table size="mini" :data="tbaleData" stripe>
            <ex-table-column
              :fit-header="true"
              :auto-fit="true"
              v-for="(item, index) in tableColumns"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            ></ex-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import BarChart from "./components/BarChart";
export default {
  components: {
    BarChart
  },
  data() {
    return {
      searchForm: { instockTimeRange: [] },
      data: {
        ONT8: {
          arterySizeTimeliness: 3.3,
          totalTimeliness: 7.2,
          totalSize: 5065,
          outTimeliness: 1.0,
          afterTimeliness: 2.9,
          arterySize: 5002,
          outSize: 5043,
          afterSize: 4902,
          problePercentage: 59.45
        },
        FTW1: {
          arterySizeTimeliness: 3.3,
          totalTimeliness: 10.8,
          totalSize: 6565,
          outTimeliness: 1.1,
          afterTimeliness: 6.4,
          arterySize: 6501,
          outSize: 6535,
          afterSize: 6299,
          problePercentage: 69.14
        },
        "邮编8、9开头": {
          arterySizeTimeliness: 3.6,
          totalTimeliness: 9.4,
          totalSize: 4282,
          outTimeliness: 1.2,
          afterTimeliness: 4.6,
          arterySize: 3808,
          outSize: 4251,
          afterSize: 3662,
          problePercentage: 55.98
        },
        "邮编4、5、6、7开头": {
          arterySizeTimeliness: 3.7,
          totalTimeliness: 11.2,
          totalSize: 6975,
          outTimeliness: 1.1,
          afterTimeliness: 6.4,
          arterySize: 6381,
          outSize: 6936,
          afterSize: 6067,
          problePercentage: 55.2
        },
        "邮编0、1、2、3开头": {
          arterySizeTimeliness: 4.0,
          totalTimeliness: 10.7,
          totalSize: 11373,
          outTimeliness: 1.0,
          afterTimeliness: 5.7,
          arterySize: 10267,
          outSize: 11295,
          afterSize: 9654,
          problePercentage: 55.89
        },
        美国: {
          arterySizeTimeliness: 8.1,
          totalTimeliness: 18.4,
          totalSize: 1070,
          outTimeliness: 1.2,
          afterTimeliness: 9.1,
          arterySize: 494,
          outSize: 1063,
          afterSize: 431,
          problePercentage: 66.26
        },
        SMF3: {
          arterySizeTimeliness: 2.8,
          totalTimeliness: 8.3,
          totalSize: 1782,
          outTimeliness: 1.1,
          afterTimeliness: 4.4,
          arterySize: 1757,
          outSize: 1775,
          afterSize: 1728,
          problePercentage: 63.36
        },
        LGB8: {
          arterySizeTimeliness: 2.9,
          totalTimeliness: 7.3,
          totalSize: 1083,
          outTimeliness: 1.1,
          afterTimeliness: 3.3,
          arterySize: 1077,
          outSize: 1082,
          afterSize: 1068,
          problePercentage: 55.22
        },
        LAX9: {
          arterySizeTimeliness: 3.3,
          totalTimeliness: 8.1,
          totalSize: 266,
          outTimeliness: 1.4,
          afterTimeliness: 3.4,
          arterySize: 255,
          outSize: 259,
          afterSize: 233,
          problePercentage: 76.32
        },
        unknown0: {
          arterySizeTimeliness: 5.8,
          totalTimeliness: 15.2,
          totalSize: 1905,
          outTimeliness: 1.1,
          afterTimeliness: 8.3,
          arterySize: 701,
          outSize: 1887,
          afterSize: 552,
          problePercentage: 65.98
        },
        美国头程仓: {
          arterySizeTimeliness: 6.2,
          totalTimeliness: 12.0,
          totalSize: 7,
          outTimeliness: 4.6,
          afterTimeliness: 1.2,
          arterySize: 6,
          outSize: 7,
          afterSize: 6,
          problePercentage: 100.0
        }
      },
      tbaleData: [],
      loading: false,
      tableColumns: [
        { prop: "name", label: "渠道" },
        { prop: "totalSize", label: "总运单数" },
        { prop: "outSize", label: "出库数" },
        { prop: "arterySize", label: "到港数" },
        { prop: "afterSize", label: "签收数" }
      ],
      chartDataName: [],
      chartData: {},
      channelMap: {
        1: 1,
        2: "ed"
      }
    };
  },
  mounted() {
    this.init();
    // this.statistics();
  },
  methods: {
    async init() {
      const { data } = await ajax("initData", {});
      console.log("data", data);
      this.channelMap = data;
    },

    // 请求数据
    async statistics() {
      console.log("this.searchForm :>> ", this.searchForm);
      this.loading = true;
      const { data } = await ajax("channelTimelinessTable", {
        startInStockTime: this.searchForm.instockTimeRange[0] || "",
        endInStockTime: this.searchForm.instockTimeRange[1] || "",
        instockChannelIds: this.searchForm.instockChannelIds
      });
      this.toTbaleData(data);
      // this.toTbaleData(this.data);
    },
    // 表格数据
    toTbaleData(data) {
      let arr = [];
      let chartDataName = [];
      let outTimeliness = []; // 出仓时效
      let arterySizeTimeliness = []; // 干线时效
      let afterTimeliness = []; // 后端时效

      this.chartData = data;

      for (const i in this.chartData) {
        const total =
          parseInt(this.chartData[i].outTimeliness) +
          parseInt(this.chartData[i].arterySizeTimeliness) +
          parseInt(this.chartData[i].afterTimeliness);
        chartDataName.push(`${i}\n总体时效：${total}`);
        let o = {
          name: i
        };
        arr.push(Object.assign(o, this.chartData[i]));

        // for (const j in this.chartData[i]) {
        outTimeliness.push(this.chartData[i].outTimeliness);
        arterySizeTimeliness.push(this.chartData[i].arterySizeTimeliness);
        afterTimeliness.push(this.chartData[i].afterTimeliness);
        // }
      }
      // 柱形图数据
      this.chartData = {
        outTimeliness: outTimeliness,
        arterySizeTimeliness: arterySizeTimeliness,
        afterTimeliness: afterTimeliness
      };
      console.log("this.chartData :>> ", this.chartData);
      this.chartDataName = chartDataName;
      console.log("this.chartDataName :>> ", this.chartDataName);
      this.tbaleData = arr;
      this.loading = false;
    },

    // 返回百分比
    percentage(v, index) {
      let num = ((v / this.chartDataTotal[index]) * 100).toFixed(2);
      return `${num}%`;
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}
</style>
